<script lang="ts">
export default {
  name: 'commission',
  description: '佣金列表',
};
</script>

<script setup lang="ts">
import { ElForm ,ElMessage} from 'element-plus';
import { onMounted, reactive, ref, toRefs} from 'vue';
import {  commissionAwait } from '@/api/invitation/types';
import { Search, Refresh, Plus } from '@element-plus/icons-vue';
import {
  commissionQuery
} from '@/api/invitation/types';
import {
  getCasualOrderPages,
  getCasualOrderPagesEdit
} from '@/api/invitation/index';
const queryFormRef = ref(ElForm);
const state = reactive({
  loading: true,
  queryParams: {

  } as commissionQuery,
  typeOptions: [
    {
      key:'数值',
      value:'number'
    },
    {
      key:'百分比',
      value:'percentage'
    },
  ],
  dialog: {
    title: '修改',
    visible: false,
  } ,
  formData:{
    endTime	:	'',
    firstKickback	:	'',
    kickback	:	''	,
    name:	''	,
    statrTime:	''	,
    type	:'',
    orderTime:[] as string[]
  },
  rules: {
    firstKickback: [
      { required: true, message: '请选择首单激励', trigger: 'change' },
    ],
    typeName: [
      { required: true, message: '请选择分佣类型', trigger: 'change' },
    ],
    kickback: [{ required: true, message: '请填写激励金额', trigger: 'change' }],
    orderTime: [{ required: false, message: '请填写开始时间与结束时间', trigger: 'change' }],
  },
  orderTime: [] as string[],
  commissionList: [] as commissionAwait[],
  total: 0,
});

const { loading, queryParams, typeOptions, orderTime, commissionList, total ,dialog,formData,rules} =
  toRefs(state);
/**
 * 下拉框查询
 */
function options() {
  // typeOption().then((res: any) => {
  //   typeOptions.value = res.data;
  // });
}

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getCasualOrderPages(queryParams.value).then((res: any) => {
    commissionList.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
  });
}
function handleSubmit(){
  getCasualOrderPagesEdit(state.formData).then((res:any)=>{
    if(res.code == '00000'){
      ElMessage.success('修改成功');
      closeDialog()
      handleQuery();
    }else{
      ElMessage.error(res.msg);
    }
  })
}
function closeDialog(){
  state.dialog.visible = false
}
function changeTime(){
  state.formData.statrTime = state.formData.orderTime[0]
  state.formData.endTime = state.formData.orderTime[1]
}
function handleUpdate(row:any){
  state.formData = JSON.parse(JSON.stringify(row))
  state.formData.orderTime = [ state.formData.statrTime , state.formData.endTime ]
  state.dialog.visible = true
}
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  orderTime.value = [];
  handleQuery();
}
onMounted(() => {
  options();
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="分佣类型" prop="type">
          <el-select style="width: 200px;" v-model="queryParams.type" placeholder="请选择分佣类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="commissionList"
        highlight-current-row
        border
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="激励类型" prop="name" width="160" />
        <el-table-column label="首单激励" prop="firstKickback" width="150" />
        <el-table-column label="激励金额" prop="kickback" min-width="150" />
        <el-table-column label="分佣类型" prop="typeName" width="190"/>
        <el-table-column label="开始时间" prop="statrTime" width="190"/>
        <el-table-column label="结束时间" prop="endTime" width="190"/>
        <el-table-column label="操作"  width="190">
          <template #default="scope">
            <el-button type="success" link @click.stop="handleUpdate(scope.row)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <el-dialog v-if="dialog.visible" :title="dialog.title" v-model="dialog.visible" width="600px" @close="closeDialog">
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="激励类型" prop="name">
          <el-input v-model="formData.name" disabled style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="首单激励" prop="firstKickback">
          <el-input v-model="formData.firstKickback" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="激励金额" prop="kickback">
          <el-input v-model="formData.kickback" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="分佣类型" prop="type">
          <el-select style="width: 200px;" v-model="formData.type" placeholder="请选择审核人类型">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.key" :value="item.value" />
        </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="orderTime">
          <el-date-picker
            @change="changeTime"
            v-model="formData.orderTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm"
            format="YYYY-MM-DD HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
